<template>
	<view class="create-rule">
		<view class="flex flex-col items-center justify-center mb-60">
			<button class="avatar" @chooseavatar="tapAvatar" open-type="chooseAvatar">
				<image style="width: 160rpx;height: 160rpx;" :src="form.avatar"></image>
			</button>
		</view>
		<view class="create-form flex">
			<view class="label">角色名称</view>
			<input type="text" placeholder="请输入角色名称" v-model="form.name" />
		</view>
		<view class="create-form">
			<view class="label">角色描述</view>
			<textarea placeholder="示例：我的名字叫小依，从小性格很温和，善于乐于助人，是小区里的百事通，上了年纪的叔叔阿姨遇到一些数码的问题，都会找到我给他们解决，所以他们都喜欢和我相处。"
				v-model="form.remark" />
		</view>
		<view class="create-form flex create-audio" @click="$refs?.popup?.open()">
			<view class="flex items-center">
				<image src="/static/mic-fill.svg" style="width: 38rpx;height: 38rpx;"></image>
				<view class="label">选择声音</view>
			</view>
			<view class="flex items-center">
				<view class="create-label">去创建</view>
				<image style="width: 30rpx;height: 30rpx" src="/static/arrow.png"></image>
			</view>
		</view>
		<view class="mt-60">
			<view class="xiaoyi-btn">创建我的角色</view>
		</view>
	</view>

	<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="40rpx 40rpx 0 0">
		<view class="audio-popup" style="padding: 20rpx 0" @touchmove.stop.prevent="discard">
			<view class="flex flex-col items-center justify-center">
				<view class="audio-title">克隆我的声音</view>
				<view class="label mt-60 mb-60">
					<view v-if="!recording">请朗读下面一段文字</view>
					<view v-else>录音中，请朗读...</view>
				</view>
				<view class="p-view">夏天来咯，又能吃上西瓜啦，我 真的太喜欢在空调房吃西瓜了， 这种感觉真的超爽！</view>
			</view>
			<view v-if="!tempFilePath">
				<view class="btns" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
					@touchcancel="voiceCancel">
					<view v-if="recording" class="info" :class="{'info-stop': willStop}">{{recordTis}}</view>
					<view :style="{'display': !recording ? 'block' : 'none'}" class="xiaoyi-btn">按住录制</view>
					<view
						:style="{'display': recording ? 'flex' : 'none', 'background': willStop ? 'linear-gradient(180deg, #FF6048 0%, #FF6249 100%)' : 'linear-gradient(90deg, #7934FD 8%, #E75DFF 90%)'}"
						class="xiaoyi-btn items-center justify-center">
						<audio-animation :lineLength="24" :animation="true" :color="'#fff'"></audio-animation>
					</view>
				</view>
			</view>
			<view class="flex audio-ok" v-else>
				<view class="xiaoyi-btn" style="background: linear-gradient(180deg, #FF6048 0%, #FF6249 100%)"
					@click="resetHandle">重新录制
				</view>
				<view class="xiaoyi-btn" @tap="okHandle">完成录制</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import AudioAnimation from '@/components/audio-animation.vue';
	export default {
		components: {
			AudioAnimation
		},
		data() {
			return {
				form: {
					avatar: '/static/tabbar/plus.svg',
					name: '',
					remark: '',
					path: ''
				},

				tempFilePath: '',
				recorderManager: getApp().globalData.recorderManager,

				sendType: 0,
				recording: false,
				willStop: false,
				recordTis: '手指上滑 取消发送',
				initPoint: {
					Y: 0
				},
			}
		},
		created() {
			uni.$on('globalEvent', this.handleMessage);
		},
		deactivated() {
			uni.$off('globalEvent');
		},
		methods: {
			handleMessage(event) {
				if (!this.willStop) {
					this.tempFilePath = event.data.tempFilePath;
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			voiceBegin(e) {
				if (e.touches.length > 1) {
					return;
				}
				this.recorderManager = uni.getRecorderManager();
				this.tempFilePath = "";
				this.recording = true;
				this.initPoint.Y = e.touches[0].clientY;
				this.recorderManager.start({
					format: "mp3"
				});
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				const [touche] = e.touches;
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开取消'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.recordTis = '手指上滑 取消发送'
				this.recorderManager.stop();
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.recorderManager.stop(); //录音结束
			},
			discard() {
				return;
			},
			tapAvatar(e) {
				this.form.avatar = e.detail?.avatarUrl ?? '/static/tabbar/plus.svg';
				console.log(e)
			},
			okHandle() {
				uni.navigateTo({
					url: '/pages/create-rule/create-ok',
					events: this.form
				})
				this.$refs?.popup?.close();
			},
			resetHandle() {
				this.tempFilePath = "";
			}
		}
	}
</script>

<style>
	.create-rule {
		padding: 60rpx 32rpx;
	}

	.create-rule .avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 160rpx;
		padding: 0;
	}

	.create-rule .avatar::after {
		border-style: none;
	}

	.create-form {
		background: #fff;
		padding: 30rpx 24rpx;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
	}

	.create-form .label {
		font-weight: 600;
		color: #222;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.create-form input,
	.create-form textarea {
		color: #666;
		font-size: 28rpx;
	}


	.create-form textarea {
		margin-top: 20rpx;
	}

	.create-label {
		font-size: 24rpx;
		color: #333;
	}


	.create-audio {
		justify-content: space-between;
	}

	.audio-popup {
		text-align: center;
	}

	.audio-popup .audio-title {
		font-weight: 600;
		padding-top: 20rpx;
	}

	.audio-popup .p-view {
		padding: 0 12%;
		color: #222;
		font-size: 40rpx;
	}

	.audio-popup .btns {
		margin: 100rpx 30rpx 60rpx;
	}

	.audio-popup .info {
		font-size: 24rpx;
		color: #333;
	}

	.audio-popup .info-stop {
		color: #FF6048;
	}


	.audio-popup .audio-ok {
		padding: 100rpx 30rpx 60rpx;

	}

	.audio-popup .audio-ok view {
		flex: 1;
		margin: 0 20rpx;
	}
</style>